<template>
	<view class="navigation-container">
		<view class="blue-background"></view>
		
		<!-- 导航卡片 -->
		<view class="content">
			<view class="nav-card">
				<view class="map-section">
					<map
						class="map"
						:latitude="latitude"
						:longitude="longitude"
						:markers="markers"
						show-location
					></map>
				</view>
				
				<view class="station-info">
					<view class="station-main">
						<view class="info-content">
							<text class="station-name">{{station.name}}</text>
							<text class="station-address">{{station.address}}</text>
						</view>
						<image :src="station.image" mode="aspectFill" class="station-image"></image>
					</view>
					<button class="nav-btn" @tap="startNavigation">导航</button>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			latitude: 35.23375,
			longitude: 113.24201,
			markers: [{
				id: 1,
				latitude: 35.23375,
				longitude: 113.24201,
				iconPath: '/static/kun/index/refuel/station.png',
				width: 32,
				height: 32
			}],
			station: {
				name: '中国石油加油站',
				address: '山阳区人民路与解放路交叉口',
				image: '/static/kun/index/station1.jpg'
			}
		}
	},
	methods: {
		startNavigation() {
			uni.showToast({
				title: '开始导航',
				icon: 'success'
			})
		}
	}
}
</script>

<style lang="scss" scoped>
.navigation-container {
	min-height: 100vh;
	background: #f5f5f5;
	position: relative;
	padding: 0 20rpx;
	
	.blue-background {
		position: absolute;
		top: -89rpx;
		left: 0;
		right: 0;
		height: 400rpx;
		background: linear-gradient(135deg, #3887FC, #1B6AE9);
		z-index: 0;
	}
	
	.content {
		position: relative;
		z-index: 1;
		padding: 20rpx;
		
		.nav-card {
			background: #fff;
			border-radius: 16rpx;
			overflow: hidden;
			box-shadow: 0 4rpx 12rpx rgba(0,0,0,0.1);
			margin: 20rpx;
			padding: 20rpx;
			
			.map-section {
				width: 100%;
				height: calc(100vh - 480rpx);
				border-radius: 8rpx;
				overflow: hidden;
				
				.map {
					width: 100%;
					height: 100%;
				}
			}
			
			.station-info {
				.station-main {
					display: flex;
					justify-content: space-between;
					padding: 30rpx;
					
					.info-content {
						flex: 1;
						margin-right: 20rpx;
						
						.station-name {
							font-size: 32rpx;
							font-weight: 500;
							color: #333;
							margin-bottom: 10rpx;
							display: block;
						}
						
						.station-address {
							font-size: 26rpx;
							color: #666;
						}
					}
					
					.station-image {
						width: 160rpx;
						height: 120rpx;
						border-radius: 8rpx;
					}
				}
				
				.nav-btn {
					width: 100%;
					height: 90rpx;
					line-height: 90rpx;
					background: linear-gradient(135deg, #3887FC, #1B6AE9);
					color: #fff;
					font-size: 32rpx;
					border-radius: 0;
					margin: 0;
				}
			}
		}
	}
}
</style>
